import Taro, { Component } from '@tarojs/taro';
import { View, ScrollView, Image, Text } from '@tarojs/components';
import { DNavBar, DTabs, DItemError } from '@/components';
import { AtSearchBar } from 'taro-ui'
import './index.scss';
import http from '@/api';
export default class BuyCheck extends Component {
  state = {
    titleIcon: require('@/assets/images/carriage_icon.png'),
    rightArrowIcon: require('@/assets/images/right_arrow_icon.png'),
    form: {
      page: 1,
      limit: 10
    },
    /**
      {
        name: '待审批',
        value: 0
      }, {
        name: '财务确认',
        value: 11
      }, {
        name: '待验车',
        value: 1
      }, {
        name: '财务打款',
        value: 13
      }, {
        name: '全部',
        value: ''
      }
     */
    tabs: [],
    list: [],
    tabIndex: 0,
    totalPage: 0,
    searchVal: ''
  }

  componentDidShow() {
    this.getMyInfo()
    this.getBuyList()
  }

  getMyInfo = async () => {
    let { auditManager, platformAdministrator, financialAdministrator } = await http.myInfo()
    if (auditManager === '01') {
      if (platformAdministrator == '01') {
        this.setState({
          tabs: [{
            name: '待审批',
            value: 0
          }, {
            name: '待验车',
            value: 1
          }, {
            name: '全部',
            value: ''
          }],
          tabIndex: 0
        })
      }
      if (financialAdministrator === '01') {
        this.setState({
          tabs: [{
            name: '财务确认',
            value: 11
          }, {
            name: '财务打款',
            value: 13
          }, {
            name: '全部',
            value: ''
          }],
          tabIndex: 11
        })
      }
      if (platformAdministrator === '01' && financialAdministrator === '01') {
        this.setState({
          tabs: [{
            name: '待审批',
            value: 0
          }, {
            name: '财务确认',
            value: 11
          }, {
            name: '待验车',
            value: 1
          }, {
            name: '财务打款',
            value: 13
          }, {
            name: '全部',
            value: ''
          }],
          tabIndex: 0
        })
      }
    }
  }

  getBuyList = async () => {
    if (this.state.form.page != 1 && this.state.form.page > this.state.totalPage) return
    let { CarAdvanceMoneyApply } = await http.getBuyList({ ...this.state.form, status: this.state.tabIndex })
    let { list, totalPage } = CarAdvanceMoneyApply
    if (this.state.form.page === 1) {
      this.setState({ list, totalPage })
    } else {
      this.setState({
        list: [].concat(this.state.list, list),
        totalPage
      })
    }
  }

  onScrollToLower = () => {
    this.setState({ form: {
      ...this.state.form,
      page: this.state.form.page + 1
    }}, () => {
      this.getBuyList()
    })
  }

  handleTabClick = (status) => {
    let form = this.state.form
    form.page = 1
    this.setState({
      tabIndex: status,
      list: [],
      totalPage: 0,
      form
    }, this.getBuyList)
  }
  handleItemClick = (data) => {
    Taro.navigateTo({ url: `/pages/buyCheck/detail?id=${data.id}&statusDesc=${data.statusDesc}` })
  }
  computedTagClass(status) {
    const tagStatusMap = {
      6: 'pass',
      8: 'no-pass',
    }
    return tagStatusMap[status] || 'orange'
  }
  searchValChange = (val) => {
    this.setState({ searchVal: val.trim() })
  }
  onClear = () => {
    let form = this.state.form
    form.content = ''
    this.setState({ searchVal: '', form })
  }
  onActionClick = () => {
    this.setState({
      form: {
        ...this.state.form,
        page: 1,
        content: this.state.searchVal
      }
    }, this.getBuyList)
  }

  render() {
    const { tabs, list, tabIndex, titleIcon, rightArrowIcon, searchVal } = this.state;

    return (
      <View className="buy-check">
        <DNavBar title="代购订单审核"></DNavBar>

        <AtSearchBar value={searchVal}
                     maxLength={80}
                     onChange={this.searchValChange}
                     onActionClick={this.onActionClick}
                     onClear={this.onClear} />

        <DTabs tabs={tabs} index={tabIndex} onClick={this.handleTabClick} />

        <ScrollView scrollY className="buy-check__body" onScrollToLower={this.onScrollToLower}>
          {
            list.map(item => (
              <View className="list-item list-item--style" onClick={() => this.handleItemClick(item)}>
                <View className="list-item__title">
                  <Image src={titleIcon} className="list-item__title__icon"></Image>
                  <Text className="list-item__title__text">{item.vehicleOwnerName}申请代购金额{item.amMoney}万</Text>
                  {
                    tabIndex === '' && <View className={['list-item__title__tag', this.computedTagClass(item.status)].join(' ')}>
                      <Text>{item.statusDesc}</Text>
                    </View>
                  }
                </View>
                <View className="list-item__info">
                  <View className="list-item__info__text">{item.entName}</View>
                  <View className="list-item__info__text">车辆一{item.amCarType}</View>
                </View>

                { tabIndex !== '' && <Image src={rightArrowIcon} className="list-item__arrow"></Image> }
              </View>
            ))
          }
          {
            list.length === 0 && <DItemError type={searchVal ? 2 : 1}></DItemError>
          }
        </ScrollView>
      </View>
    )
  }
}
